有感於某日在調整Input組件時，發現自己正在做以前做過的事情，而且每換一個設計系統框架我就要再重做一個一模一樣的組件，這點其實是很可怕的。也在此時萌生了想要建立一個屬於自己的UI Kit的想法。

為何設計

為何我們要開始整理自己的一套 Design System? 當公司專案已經跑了幾輪後，其實產品UI設計脈絡已經有跡可循，這時可以蒐集同事們的回饋開始收斂需求。以下幾點如果有出現在團隊的開發中，也許可以思考是不是需要開始建立一套設計系統。

重工

一直在做重複的事情，或重複設計相同組件。你也做了一個，他也做了一個，或是這個專案做了，下個專案又要再重複一次。

不安全感

組件的目的開始發散，有時候這邊是這樣，到這頁又是那樣。沒有準則可以依循時，在設計上就容易耗費過多時間，甚至為了嘗試而出現奇怪的東西（？。

設計出現矛盾

同樣的情境出現不同設計，缺乏統一的顯示以及操作模式，容易造成使用者困惑。

如何開始

1. 團隊

要建立起一個設計系統前，了解團隊的回饋是一項很重要的功課。可以找你一起合作的設計師，開發的同事，QA，產品經理，蒐集他們的想法，並共同制定原則。

2. 截圖

蒐集現有的產品截圖，或是你期望的設計也可以。有了具體的圖像後，我們要做的事情就是將他們整理成文件，便於展開後續的討論。

3. 尋找模式、分類

有了這些截圖後，可以開始尋找以及拆分出產品組件有哪些模式，以及哪些操作。每個職位角色可以依照他們的經驗來找到組件的模式，列如設計師可以看一下這些組件在RWD下應該是什麼樣子，QA也可以依照以往的經驗來告訴你他覺得操作起來如何等等。

4. 討論

取得共識以及組件名詞的定義等等，互相討論來消彌彼此之間資訊的不對等。

5. 合併

將這些想法以及整理出來的組件放在一個檔案中供大家檢視。然後就可以開始著手進行下一步了！

小結

建立一個設計系統前需要大家一同建立與討論，才不對讓他淪為一個單純的UI-kit，整理好需求與文件，才好在收斂的情況下進行開發。另外也要記得設計系統建立之後，是要可以服務各個團隊並提供準則的，所以在層級以及發想出發點都應當更廣泛需思考。

參考資料

1. Thinking in Symbols for Universal Design - Benjamin Wilkins, Airbnb
2. Invision design system